<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<title>绑定手机</title>
		<link rel="stylesheet" href="../../../css/mui.min.css">
		<link rel="stylesheet" href="../../../css/app.css">
		<style>
			body {
				background: #fff;
			}
			
			input {
				border-radius: 0;
			}
			
			input[type=text] {
				border: none;
				border-bottom: 0.01rem solid #e2e2e2;
				margin-bottom: 0;
				border-radius: 0!important;
			}
			
			.save {
				width: 6rem;
				height: 0.68rem;
				background: #117afd;
				font-size: 0.3rem;
				color: #fff;
				border: none;
				outline: none;
				position: absolute !important;
				top: 5.2rem !important;
				left: 0.75rem !important;
				border-radius: 0.1rem;
			}
			
			.info {
				width: 100%;
				height: 1.34rem;
				border-bottom: 0.01rem solid #e2e2e2;
				text-align: center;
				line-height: 2.34rem;
				color: #666666;
				font-size: 0.28rem;
			}
			
			.tel,
			.key,
			.psd {
				width: 100%;
				height: 0.8rem;
				border: none;
				border-bottom: 0.01rem solid #e2e2e2;
				padding-left: 0.36rem;
				font-size: 0.26rem;
			}
			
			input::-webkit-input-placeholder {
				font-size: 0.26rem;
				color: #999999;
			}
			
			.submit {
				width: 1.8rem !important;
				padding: .08rem 0!important;
				background: #117afd !important;
				font-size: 0.24rem !important;
				color: #fff !important;
				position: absolute !important;
				top: .15rem!important;
				right: 0.4rem !important;
				border: none!important;
			}
			
			.input_code {
				position: relative;
				width: 7.5rem;
			}
			
			.pro_box input {
				padding: .08 .25rem!important;
			}
		</style>
	</head>

	<body>
		<!--<div class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<a class="back">返回</a>
			<h1 class="mui-title">绑定手机</h1>
		</div>-->
		<div class="pro_box">
			<div class="info">
				<!--绑定手机号-->
			</div>
			<input type="text" name="" id="phone" value="" class="tel" placeholder="请输入11位手机号码" />
			<div class="input_code">
				<input type="text" name="" id="confirm" value="" class="key" placeholder="请输入验证码" />
				<input type="button" value="发送验证码" class="submit" />
			</div>
			<input type="text" name="" id="psd" value="" class="psd" placeholder="请输入登录密码" />
			<button class="save">提交</button>
		</div>
	</body>
	<script src="../../../js/mui.min.js"></script>
	<script src="../../../js/common.js"></script>
	<script src="../../../js/jquery2.2.4.min.js"></script>
	<script src="../../../js/md5.min.js"></script>
	<script type="text/javascript" src="../../../js/app.js"></script>
	<script>
		var checkCode = '';
		document.querySelector('.submit').addEventListener('tap', function() {
			var phone = document.getElementById('phone').value;
			//验证手机号有没有被使用
			checkPhone(phone, function(isAble) {
				if(isAble) { //手机号可用
					//发送验证码
					sendSMS(SYS_PARAM.SEND_ID_CODE_SMS, phone, function(code, autoShow) {
						if(code) {
							autoShow && $("#confirm").val(code);
							checkCode = code;
						}
					});
				}
			});

		});
		document.querySelector('.save').addEventListener('tap', function() {
			var phone = document.getElementById('phone').value;
			var confirmNum = document.getElementById('confirm').value;

			if(phone == null || phone == '' || phone.trim() == '') {
				mui.toast('请输入11位手机号码！');
				return;
			}

			if(confirmNum == null || confirmNum == '' || confirmNum.trim() == '') {
				mui.toast('验证码不能为空！');
				return;
			}

			if(confirmNum != checkCode) {
				mui.toast('验证码不正确！');
				return;
			}
			var psd = document.getElementById('psd').value;
			var params = {
				"phoneNum": phone,
				"userId": getUserId(),
				"psd": md5(psd)
			};
			utils.ajax('appUserInfo/bindPhone.do', function(data) {
				var data = JSON.parse(data);
				if(data.state == '1') {
					//showTemplates('','手机号绑定成功','href');
					location.href = 'phoneSuccess.html';
				} else {
					mui.toast(data.msg);
				}
			}, jsonToParams(params), null, function() {
				mui.toast('抱歉，当前服务不可用，请稍后再试');
			})
		})
	</script>

</html>